<template>
  <div @touchmove.stop @touchmove.prevent class="bg-blur icon animated fadeIn">
    <div class="pop box box-ver icon">
      <div @click="hidePrize()" class="icon-close"></div>
      <div :class="{'ani-card':aniCardFlag}" class="icon icon-card box box-jc box-ac">
        <div :class="{'hidePrize': !showPrize}" class="prize box">
          <div :style="{'background-image': 'url('+prize.covers+')'}" class="icon icon-prize-img"></div>
          <div class="prize-desc tx-c box box-f1 box-ac box-jc" v-text="prize.title"></div>
        </div>
      </div>
      <div class="text box box-ac box-jc">
        &nbsp;美食之城建成啦！<br>&nbsp;请领取您的礼物！
      </div>
      <div @click="checkUser()" class="icon icon-button icon-button-know"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getQueryString } from '@/assets/js/common'
import { openToast } from '@/assets/js/tools'
export default {
  name: 'tipsPrize',
  data () {
    return {
      showEggFlag: false,
      aniCardFlag: false,
      showPrize: false,
      prize: {
        covers: '',
        title: ''
      },
      Ticket: '',
      DataSource: '',
      hasLottery: false
    }
  },
  computed: mapState({
    activityGuid: 'activityGuid',
    userGuid: 'userGuid'
  }),
  mounted () {
    this.Ticket = getQueryString('Ticket')
    this.DataSource = getQueryString('DataSource')
    // alert('Ticket>>>' + this.Ticket + '***DataSource>>>' + this.DataSource)
    if (this.Ticket && this.DataSource) {
      this.lottery()
    }
  },
  methods: {
    hidePrize () {
      this.$emit('hidePrize')
    },
    checkUser () {
      let { AppID, Mallid, PublicKey, CallbackUrl } = this.$config.maoku
      if (this.Ticket && this.DataSource) {
        if (this.hasLottery) {
          this.getPrizeNoSend()
        } else {
          this.lottery()
        }
      } else {
        window.location.href = `https://m.mallcoo.cn/a/open/User/V2/OAuth/CardInfo/?AppID=${AppID}&PublicKey=${PublicKey}&CallbackUrl=${CallbackUrl}`
      }
    },
    lottery () {
      this.$http({
        method: 'post',
        url: `${this.$config.baseUrl}/api/stampuser/award_get`,
        data: {
          activity_guid: this.activityGuid,
          user_guid: this.userGuid
        }
      }).then(res => {
        if (+res.status === 1) {
          let prizeOne = res.data.one
          let prizeTwo = res.data.two
          if (!prizeTwo) prizeTwo = {}
          let prize = Object.assign(prizeOne, prizeTwo)
          prize.covers = `${this.$config.baseUrl}${prize.covers}`
          this.prize = prize
          this.hasLottery = true
          this.getPrizeNoSend()
          this.aniCardFlag = true
          setTimeout(() => {
            this.showPrize = true
          }, 999)
        } else {
          openToast({
            msg: res.message,
            duration: 1500
          })
        }
      })
    },
    getPrizeNoSend () {
      let _this = this
      this.$http({
        method: 'post',
        url: `${this.$config.baseUrl}/api/stampuser/get_award_nosend`,
        data: {
          activity_guid: this.activityGuid,
          user_guid: this.userGuid
        }
      }).then(res => {
        if (res.status === 1) {
          if (res.data.award) {
            let Arr = [].concat(res.data.award)
            Arr.forEach(item => {
              _this.sendPrize(item)
            })
          }
        } else {
          openToast({
            msg: res.message,
            duration: 1500
          })
        }
      })
    },
    sendPrize (prize) {
      this.$http({
        method: 'post',
        url: `${this.$config.baseUrl}/api/stampuser/award_send`,
        data: {
          activity_guid: this.activityGuid,
          user_guid: this.userGuid,
          id: prize.user_award_id,
          Ticket: this.Ticket
        }
      }).then(res => {
        if (res.status === 1) {
          // this.hasSendPrize = true
          openToast({
            msg: '发券成功',
            duration: 1500
          })
        } else {
          openToast({
            msg: res.message,
            duration: 1500
          })
        }
        setTimeout(() => {
          let { Mallid } = this.$config.maoku
          window.location.href = `http://m.mallcoo.cn/a/coupon/${Mallid}`
        }, 666)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/mixins.scss';
.pop{
  width:5.98rem;
  height:7.88rem;
  @include bg-image('../assets/images/bg-tips-prize')
}
.text{
  color:#727171;
  font-weight:600;
  position: absolute;
  top:5.4rem;
  width:100%;
  font-size:.3rem;
  line-height:.42rem;
  text-align: center;
}
.icon-close{
  width:.84rem;
  height:.84rem;
  position: absolute;
  right:.3rem;
  top:.15rem;
  // border: 1px solid #000;
}
.icon-card{
  position: absolute;
  left:.46rem;
  top:1.82rem;
  width:5.07rem;
  height:3.12rem;
  @include bg-image('../assets/images/icon-card');
}
.prize{
  margin: 1rem .28rem;
  width:4.5rem;
  border:.03rem dashed;
  .icon-prize-img{
    background-color:rgba(255,255,255,.5);
    width:1.12rem;
    height:1.12rem;
  }
  .prize-desc{
    color:#FFF;
    font-size:.5rem;
    font-weight: 600;
  }
}

.hidePrize{
  opacity:0;
}
.ani-card{
  animation-name: anicard;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes anicard {
  0%{
    transform: rotateY(0);
  }
  49.9%{
    @include bg-image('../assets/images/icon-card');
  }
  50%{
    @include bg-image('../assets/images/icon-card2');
    transform: rotateX(-10deg) rotateY(90deg) translateY(-.33rem);
  }
  100%{
    @include bg-image('../assets/images/icon-card2');
    transform: rotateY(0);
  }
}
.icon-button-know{
  position: absolute;
  margin:0;
  left:.98rem;
  bottom:.54rem;
  @include bg-image('../assets/images/icon-button-receive');
}
</style>
